<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>vue</title>
    <!-- 引入样式 -->
    <link
      rel="stylesheet"
      href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
    />
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <!-- 引入框架(做轮播) -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
      /* #region 头部logo样式 */
      * {
        margin: 0;
        padding: 0;
      }
      .nav {
        height: 44px;
        background-color: white;
        display: flex;
        padding: 0 20px;
        justify-content: space-between;
        align-items: center;
        overflow: hidden;
      }
      .nav > .logo {
        width: 177px;
        height: 27px;
      }
      .nav > .nav-right {
        height: 27px;
        width: 82px;
        animation: move 3s infinite;
      }
      .nav-right > div {
        height: 44px;
        text-align: center;
        line-height: 25px;
      }
      @keyframes move {
        0% {
          transform: translateY(0);
        }
        50% {
          transform: translateY(-44px);
        }
        100% {
          transform: translateY(0);
        }
      }
      /* #endregion */
      /* #region 轮播样式 */
      .swiper-img {
        height: 130px;
      }
      /* #endregion */
      /* #region 标题 */
      .title {
        height: 40px;
        padding: 0 10px;
        line-height: 40px;
        border-bottom: 1px solid #e6e6e6;
        display: flex;
        justify-content: space-between;
      }
     
      .title > p:nth-child(2) {
        font-size: 14px;
        color: gray;
      } 
      /* #endregion */
      /* #region  轮播图 */
      .fiveD {
        padding: 10px;
      }
      .swiper_con > img {
        width: 100%;
      }
      .menu {
        background-color: bisque;
        display: flex;
        justify-content: space-around;
        /* align-items: center; */
      }
      .menu > p {
        width: 24px;
        height: 24px;
        background-color: aqua;
        margin: 10px;
      }
      /* #endregion */
      /* #region 大触直播  */
      .fourD {
        padding: 10px;
        display: flex;
        flex-wrap: wrap;
        box-sizing: border-box;
      }
      .playVideo {
        width: 100%;
      }
      .author {
        margin: 10px 0;
        display: flex;
        align-items: center;
      }
      .author > img {
        width: 22px;
        height: 22px;
        border-radius: 50%;
        margin-right: 8px;
      }
      .author > span {
        color: #000000;
        font-size: 14px;
      }
      h4{
        margin-bottom: 14px;
      }

      .playVideo:nth-child(1) .video_text {
        display: flex;
        justify-content: space-between;
      }
      .playVideo:nth-child(1) > .video_text {
        display: flex;
        justify-content: space-between;
      }
      .video_pic{
        position: relative;
      }
      .video_pic>div{
        width: 62px;
        height: 19px;
        background-color: rgb(245, 11, 105);
        
        font-size: 14px;
        border-radius: 5px 0 5px 0;
        position: absolute;
        text-align: center;
       
        padding: 5px;
        top:0px;
        left: 0px;
        color: white;
      }
      .video_pic>p{
        width: 60px;
        height: 18px;
        font-size: 12px;
        border-radius: 5px;
        position: absolute;
        text-align: center;
        padding: 5px;
        top:5px;
        right: 5px;
        color: white;
        background: rgba(0, 0, 0, 0.3);
      }
      .video_text > p {
        color: #a4a4a4;
        font-size: 12px;
      }

      .playVideo:nth-child(1) {
        width: 94%;
        margin-right: 0px;
      }
      .playVideo:nth-child(2) {
        margin-right: 10px;
      }
      .playVideo {
        width: 43%;
        margin: 5px 0;
        /* border: 1px solid #ccc; */
        border-radius: 3px;
        box-shadow: 2px 2px 16px rgb(198, 193, 193);
        padding: 10px;
      }
      .playVideo .video_pic img {
        width: 100%;
      }
      /* #endregion */
      /* #region 热门教程 */
      .threeD {
        padding: 10px;
        width: 94%;
        display: flex;
        /* 换行 */
        flex-wrap: wrap;
        border-top: 1px solid #e6e6e6;
      }
      .hot_content {
        width: 50%;
      }
      .hot_img {
        width: 100%;
        
      }
      .hot_img:nth-child(1),.hot_img:nth-child(3){
        margin-right: 10px;
      }
      .hot_img > p {
        font-size: 14px;
        margin-bottom: 15px;
        width: 93%;
      }
      .hot_img > img {
        width: 170px;
        height: 140px;
      }
      .hot_content > p {
        text-align: justify;
        font-size: 14px;
        color: #222;
        font-weight: bold;
        margin: 10px 0;
      }
      /* #endregion */
      /* #region 图文教程 */
      .text_content,
      .recomment_con {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .content_img {
        border-bottom: 1px solid #e6e6e6;
        padding: 0 10px;
        position: relative;
      }
      .content_img,
      .content_img > img {
        width: 140px;
        height: 96px;
      }
      .cont_title {
        width: 214px;
        height: 88px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 18px 0;
        color: #222;
        font-weight: 400;
      }
      .cont_title > p:nth-child(2) {
        color: #a4a4a4;
        font-size: 14px;
      }
      .tag {
        position: absolute;
        top: 0px;
        left: 15px;
        background-color: #ffa323;
        width: 60px;
        height: 16px;
        border-radius: 3px 3px 3px 3px;
      }
      .tag > p {
        color: #fff;
        font-size: 12px;
        text-align: center;
      }
      /* 每一段最后的灰色栏 */
      .wrap{
        width: 100%;
        height: 12px;
        background-color: #eee;
      }

      /* #endregion */
    </style>
  </head>

  <body>
    <div id="app">
      <!-- #region 头部logo -->
      <div class="nav">
        <img
          class="logo"
          src="https://assets-cdn.lanqb.com/lanqb/logo05.png"
          alt=""
        />
        <div class="nav-right">
          <div>注册有礼</div>
          <div>
            <span>注册</span>
            <span>登录</span>
          </div>
        </div>
      </div>
      <!-- #endregion -->
      <!-- #region 轮播 -->
      <el-carousel height="150px">
        <el-carousel-item v-for="swiper in swipers" :key="swiper.id">
          <img
            class="swiper-img"
            :src="`https://ss.lanqb.com/${swiper.picture}`"
            alt=""
          />
        </el-carousel-item>
      </el-carousel>
      <div class="wrap"></div>
      <!-- #endregion -->
      <!-- #region 大触直播 -->
      <first first_title="大触直播"></first>
      <div class="fourD">
        <four v-for="item in touchCourse" :key="item.id" :p_video="item"></four>
      </div>
      <div class="wrap"></div>
      <!-- #endregion -->
      <!-- #region  热门教程 -->
      <first first_title="热门教程"></first>
      <div class="threeD">
        <three v-for="item in hotCourse" :key="item.id" :picture="item">
        </three>
      </div>
      <div class="wrap"></div>
      <!-- #endregion -->
      <!-- #region 图文教程 -->
      <first first_title="图文教程"></first>
      <div class="twoD">
        <two v-for="item in picCourse" :key="item.id" :text_image="item"></two>
      </div>
      <div class="wrap"></div>
      <!-- #endregion -->
      <!-- #region  推荐咨询 -->
      <first first_title="推荐咨询"></first>
      <div class="oneD">
        <one
          v-for="item in recommendCourse"
          :key="item.id"
          :recomment_text="item"
        ></one>
      </div>
    </div>
    <!-- #endregion -->
    <!-- #region  标题 -->
    <template id="top_first">
      <div class="title">
        <p>{{first_title}}</p>
        <p>查看更多&gt;</p>
      </div>
    </template>
    <!-- #endregion -->
    <!-- #region  大触直播 -->
    <template id="play">
      <div class="playVideo">
        <div class="author">
          <img :src="'https://ss.lanqb.com/' + p_video.profile.avatar" alt="" />
          <span>{{p_video.profile.nickname}}</span>
        </div>
        <h4>{{p_video.title}}</h4>
        <div class="video_pic">
          <img :src="'https://ss.lanqb.com/'+ p_video.cover" />
          <div v-if="p_video.id==604">即将直播</div>
          <p>第{{p_video.periods}}期</p>
        </div>
        <div class="video_text">
          <p>时间 : {{fn}}</p>
          <p v-if="p_video.id==604">{{p_video.statistic.purchases}}人感兴趣</p>
          <p v-else="p_video.id==605">♥ {{p_video.statistic.purchases}}</p>
        </div>
      </div>
    </template>
    <!-- #endregion -->
    <!-- #region 热门教程 -->
    <template id="hot">
      <div class="hot_content">
        <div class="hot_img">
          <img :src="'https://ss.lanqb.com/'+picture.posters.mobile" />
          <p>{{picture.title}}</p>
        </div>
      </div>
    </template>
    <!-- #endregion -->
    <!-- #region  图文教程 -->
    <template id="text">
      <div class="text_content">
        <div class="content_img">
          <!-- <img :src="'https://ss.lanqb.com/'+text_image.imgCover"> -->
          <!-- 模板字符串 -->
          <img :src="`https://ss.lanqb.com/${text_image.imgCover}`" />
        </div>
        <div class="cont_title">
          <p>{{text_image.title}}</p>
          <p>老师: {{text_image.user_profile.nickname}}</p>
        </div>
      </div>
    </template>
    <!-- #endregion -->
    <!-- #region  推荐咨询 -->
    <template id="recomment">
      <div class="recomment_con">
        <div class="content_img">
          <img :src="'https://ss.lanqb.com/'+recomment_text.imgCover" />
          <div class="tag" v-if="recomment_text.category">
            <p>{{recomment_text.category.category_name}}</p>
          </div>
        </div>
        <div class="cont_title">
          <p>{{recomment_text.title}}</p>
          <!-- <p>{{recomment_text.created_at}}</p> -->
          <p>{{fn2+'日'}}</p>
        </div>
      </div>
    </template>
  </body>
  <script>
    //标题
    const first = {
      props: ["first_title"],
      template: "#top_first",
      data() {
        return {};
      },
    };
    /* 大触直播 */
    const four = {
      props: ["p_video"],
      template: "#play",
      data() {
        return {};
      },
      computed:{
        fn() {
          var str = this.p_video.begin_at.slice(6,10);
          var str2 = this.p_video.begin_at.slice(11,20);
          str = str.split("");
          str.splice(1, 1, "月");
          str.splice(4, 1, "日");
          str = str.join("");
          var str3 = str + ' ' + str2;
          return str3;
        },
      }
    };
    // 热门教程
    const three = {
      props: ["picture"],
      template: "#hot",
      data() {
        return {};
      },
    };
    // 图文教程
    const two = {
      props: ["text_image"],
      template: "#text",
      data() {
        return {};
      },
    };
    // 推荐咨询
    const one = {
      props: ["recomment_text"],
      template: "#recomment",
      data() {
        return {};
      },
      computed: {
        fn2() {
          var str = this.recomment_text.created_at.slice(0, 11);
          str = str.split("");
          str.splice(4, 1, "年");
          str.splice(7, 1, "月");
          str = str.join("");
          return str;
        },
      },
    };

    // 根组件
    let vm = new Vue({
      el: "#app",
      data: {
        swipers: [], // 轮播图数据
        touchCourse: [], // 大触直播
        hotCourse: [], // 热门教程
        picCourse: [], // 图文教程
        recommendCourse: [], // 推荐资讯
      },
      methods: {},
      components: {
        first,
        one,
        two,
        three,
        four,
      },
      created() {
        // 大触直播
        fetch(
          "https://m.lanqb.com/api/daniu?link=paging&live=3&is_live=1&limit=3&page=1"
        )
          .then((res) => res.json())
          .then((data) => {
            this.touchCourse = data.live.slice(0, 3);
            console.log(this.touchCourse);
          });
        // 轮播图
        fetch(
          "https://m.lanqb.com/api/home/banner?type=m&local_code=10&limit=6&order=weight"
        )
          .then((res) => res.json())
          .then((data) => {
            this.swipers = data.data;
            console.log(this.swipers);
          });
        //热门教程
        fetch("https://m.lanqb.com/api/home/series")
          .then((res) => res.json())
          .then((data) => {
            this.hotCourse = data.slice(0, 4);
            console.log(this.hotCourse);
          });
        // 图文教程
        fetch("https://m.lanqb.com/api/home/graphic-tutorials")
          .then((res) => res.json())
          .then((data) => {
            this.picCourse = data.slice(0, 3);
            console.log(this.picCourse);
          });
        // axios.get("https://m.lanqb.com/api/home/graphic-tutorials")
        // .then(result => {
        //   this.picCourse = result.slice(0, 3);
        //   console.log(this.picCourse);
        // });
        // 推荐咨询
        fetch("https://m.lanqb.com/api/home/news")
          .then((res) => res.json())
          .then((data) => {
            this.recommendCourse = data;
            console.log(this.recommendCourse);
          });
      },
    });
  </script>
</html>
